<template>
  <div class="view_echart" id="echart"></div>
</template>

<script>
  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  export default {
    created() {
      this.$nextTick(function() {
        this.getEchartData();
      });
    },
    methods: {
      getEchartData() {
        let bgColor = '#fff';
        let title = '总量';
        let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
        let echartData = [{
          name: "贷款人流量",
          value: "42400"
        },
          {
            name: "贷款消息总量",
            value: "41212"
          },
          {
            name: "贷款金额",
            value: "19280"
          },
          {
            name: "贷款订单数量",
            value: "23600"
          }
        ];

        let formatNumber = function(num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ',');
        }
        let total = echartData.reduce((a, b) => {
          return a + b.value * 1
        }, 0);
        var myechart = this.$echarts.init(document.getElementById('echart'));
        myechart.setOption({
          backgroundColor: bgColor,
          color: color,
          // tooltip: {
          //     trigger: 'item'
          // },
          title: [{
            text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: 'normal',
                  color: '#666666',
                  padding: [10, 0]
                },
                val: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: '#333333',
                }
              }
            }
          },{
            text: '',
            top: 20,
            left: 20,
            textStyle: {
              fontSize: 14,
              color:'#666666',
              fontWeight: 400
            }
          }],
          // legend: {
          //     orient: 'vertical',
          //     icon: 'rect',
          //     x: '80%',
          //     y: 'center',
          //     itemWidth: 12,
          //     itemHeight: 12,
          //     align: 'left',
          //     textStyle: {
          //         rich: {
          //             name: {
          //                 fontSize: 12
          //             },
          //             value: {
          //                 fontSize: 16,
          //                 padding: [0, 5, 0, 15]
          //             },
          //             unit: {
          //                 fontSize: 12
          //             }
          //         }
          //     },
          //     formatter: function(name) {
          //         let res = echartData.filter(v => v.name === name);
          //         res = res[0] || {};
          //         let unit = res.unit || '';
          //         return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
          //     }
          //     // data: legendName
          // },
          series: [{
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 2
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: '#e6e6e6'
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                    '{icon|●}{name|' + params.name + '}{value|' +
                    formatNumber(params.value) + '}'
                  );
                },
                padding: [0 , -100, 25, -100],
                rich: {
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: '#666666'
                  },
                  value: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333333'
                  }
                }
              }
            },
          }]
        })
      }
    }
  }
</script>

<style scoped>
  .view_echart{
    margin-left: 10px;
    width: 1000px;
    height: 600px;
  }
</style>
